<template>
  <ul class='list'>
    <li v-for="item in getListData" class="pr">
      <img class="fl pa" :src="item.img" alt="">
      <div class="content pr">
        <p class="title">姓名：<span class="color999"> {{item.name}}</span></p>
        <p class="title">电话：<span class="color999"> {{item.phone | formatPhone}}</span></p>
        <p v-show="select!=1" class="title">提交时间：<span class="color999"> {{item.time}}</span></p>
      </div>
      <span class="fr color-gold btn-active pa" @click="showDetail(item)">查看详情</span>
    </li>
  </ul>
</template>
<script>
export default {
  props:["data","selectIndex"],
  components: {},
  name: "",
  data() {
    return {
      select:0,
    };
  },
  computed:{
    getListData(){
      this.select=this.selectIndex
      return this.data
    }
  },
  filters:{
    formatPhone(val){
      return val.slice(0,3)+" "+val.slice(3,7)+" "+val.slice(7)
    }
  },
  methods: {
    showDetail(item){
      sessionStorage.setItem("detailId",item.id)
      this.$router.push("/works/aftersale/detail")
    }
  },
  created() {
    
  }
};
</script>
<style lang="scss" scoped>
.list {
  margin: 0 15px;

  li{
    padding: 15px 0;
    min-height: 40px;
    border-bottom: 1px solid #f2f2f2;

    img{
      display: inline-block;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      top: 50%;
      transform: translateY(-50%);
    }
    p{
      margin-left: 55px;
      line-height: 25px;

    }
    .title{
      font-size: 14px;
      color: #333;
    }
    .color-gold{
      right: 20px;
      text-decoration: underline;
      line-height: 20px;
      top: 50%;
      transform: translateY(-50%);
    }
    .color-gold::after{
      position:absolute;
      z-index: 100;
      content: "";
      width: 0;
      height: 0;
      border: 5px solid transparent;
      border-left-color: #FF9F20;
      top: 50%;
      transform: translate(50%,-50%);
    }
  }
}
</style>